<template>
	<view>
		<view class="login_title">修改手机号</view>
		<view class="login_input_box">
			<view class="login_input_item">
				<input type="text" v-model="mobile" placeholder-class="input_class"
					:placeholder="type==1?'请输入旧手机号':'请输入新手机号'" @input="MinputEvent" />
				<image class="clear_btn" v-show="istextclear" @click="clearMobile" src="../../static/img/kdfe@df.png"
					mode=""></image>
			</view>
			<view class="login_input_item">
				<input type="text" v-model="code" @input="PinputEvent" placeholder-class="input_class"
					placeholder="请输入验证码" />
				<view class="input_box_r">
					<view class="code_btn" v-if="showyanz" @click="getcode" :class="{'activegetcode':mobile}">获取验证码
					</view>
					<view v-else class='code_btn '>{{time}}S后重发</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendSMS
	} from '@/api/personal.js'
	export default {
		props:{
			showclear:{
				typeof:Boolean,
				default:false
			},
			showinput:{
				typeof:Boolean
			},
			//input placeholder属性切换
			type:{
				typeof:Number
			}
		},
		data() {
			return {
				password: '',
				time: 60,
				showyanz: true,
				mobile: '',
				code: '',
				//旧手机号码
				omobile: '',
				//旧验证码
				ocode: '',
				a:false
			}
		},
		created() {
			let data = this.$GetRequest()
			this.omobile = data.mobile
			this.ocode = data.code
		},
		methods: {

			//清空input
			clearMobile() {
				this.mobile = ''
				this.istextclear = false
				console.log()
			},
			//输入框聚焦
			MinputEvent() {
				this.$emit('changeMsg1', this.mobile)
			},
			//获取验证码
			getcode() {
				//手机号验证
				let phone = /^1[3456789]\d{9}/
				if (phone.test(this.mobile)) {
					let obj = {
						mobile: this.mobile
					}
					sendSMS(obj).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg)
						}
					})
					this.showyanz = false
					//倒计时
					let timer = setInterval(() => {
						if (this.time > 0) {
							this.time--
						} else {
							this.showyanz = true
							this.time = 60
							clearInterval(timer)
						}
					}, 1000)
				} else {
					this.$msg('请输入确认的手机号')
				}
			},
			PinputEvent() {
				let obj = {
					old_mobile: this.omobile,
					old_captcha: this.ocode,
					mobile: this.mobile,
					captcha: this.code
				}
				this.$emit('changeMsg2', obj)
			},
		},
		computed: {
			//计算父值showclear
			istextclear: {
				get(){
					return this.showclear
				},
				set(){
				}
			}
		},
	}
</script>
<style scoped lang='scss'>
	.login_title {
		width: 80%;
		margin: auto;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #333;
	}

	.login_input_box {
		width: 80%;
		margin: 0 auto;
		margin-top: 40rpx;
		.login_input_item {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #e5e5e5;
			justify-content: space-between;

			.input_box_r{
				.code_btn{
					width: 130rpx;
					height: 50rpx;
					border: 1rpx solid #ddd;
					border-radius: 6rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.activegetcode{
				    color: #303030;
				    border: 0.5px solid #303030;
				}
			}

			.input_class {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999;
			}

			.clear_btn {
				width: 13px;
				height: 13px;
			}
		}
		
	}
</style>
